<template>
  <div class="contain-login">
    <div class="login-form">
      <img
        src="https://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
        class="login-logo"
      />
      <el-form :model="loginForm" :rules="rules" ref="loginForm">
        <el-form-item prop="loginName">
          <i class="el-icon-phone"></i>
          <el-input type="text" v-model="loginForm.loginName"> </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <i class="el-icon-lock"></i>
          <el-input
            :type="passwordType"
            v-model="loginForm.password"
          ></el-input>
          <i
            :class="
              passwordType === 'password' ? 'el-icon-close' : 'el-icon-open'
            "
            @click="changeEyes"
          ></i>
        </el-form-item>
        <el-form-item prop="code">
          <el-row class="yz">
            <el-col :span="3" class="logo"><i class="el-icon-yzm"></i></el-col>
            <el-col :span="15"
              ><el-input type="text" v-model="loginForm.code"> </el-input
            ></el-col>
            <el-col :span="6" class="yzm">
              <img ref="img" src="" alt="" @click="getImg"
            /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="btnform">
          <el-button class="btn" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { imgApi } from '@/api/user'
export default {
  name: 'Dkd2Login',

  data () {
    return {
      passwordType: 'password',
      loginForm: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: 1,
        loginType: 0
      },
      rules: {
        loginName: [
          { required: true, message: '请输入用户名', triggers: blur }
        ],
        password: [{ required: true, message: '请输入密码', triggers: blur }],
        code: [{ required: true, message: '请输入验证码', triggers: blur }]
      }
    }
  },

  mounted () {
    this.getImg()
  },

  methods: {
    changeEyes () {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
    },
    async getImg () {
      // console.log(111)
      this.loginForm.clientToken = Math.random()
      // console.log(num)
      // this.src = this.$store.dispatch('user/imgApi', num)
      // console.log(this.src)
      const res = await imgApi(this.loginForm.clientToken)
      this.$refs.img.src = window.URL.createObjectURL(res)
      // console.log(res) // res此时是一个blob 对象,src可以解析并发送请求获取验证码
      // const oFileReader = new FileReader()
      // oFileReader.onloadend = function (e) {
      //   // console.log(e.target.result)
      //   oFileReader.readAsDataURL(res)
      // }
    },
    // 登录
    async submit () {
      try {
        await this.$refs.loginForm.validate()
        await this.$store.dispatch('user/loginAction', this.loginForm)
        this.$router.push('dashboard')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.contain-login {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://likede2-admin.itheima.net/img/background.be4fae7d.png');

  /deep/ .login-form {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
    .login-logo {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      margin-left: -48px;
    }
    .yz {
      display: flex;
      width: 100%;
      .logo {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .yzm {
        height: 47px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .btnform .el-form-item__content {
      border: none !important;
    }
    .el-form-item__content {
      border-radius: 4px;
      border: 1px solid #e2e2e2;
      align-items: center;
      display: flex;
      justify-content: space-evenly;
      .el-icon-open,
      .el-icon-close {
        font-size: 26px;
      }
      .btn {
        width: 100%;
        height: 52px;
        background: linear-gradient(262deg, #2e50e1, #6878f0);
        opacity: 0.91;
        border-radius: 8px;
        color: #fff;
        text-shadow: 0 7px 22px #cfcfcf;
      }

      .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;
        .el-input__inner {
          border: none;
          height: 47px;
        }
      }
    }
  }
}
</style>
